<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style type="text/css">
        body{
            font:15px/1.3 'Open Sans', sans-serif;
            color: #5e5b64;
            background-color: #f5f5f5;
        }
        a, a:visited {
            outline:none;
            color: #2e3eff;
        }
        a:hover,a{
            text-decoration:none;
        }
        section, footer, header, aside, nav{
            display: block;
        }
        ul{
            padding: 10px 30px;
            margin: 0px;
        }
        ul li{
            margin: 8px;
        }
        #frame{
            width: 475px;
            margin: 50px auto;
            background-color:white;
            border-radius:5px;
            border: 1px solid #e5e5e5;
            box-shadow: 5px 5px 25px #ccc;
        }
        nav{
            display:inline-block;
            background-color: #e7e7e7;
            box-shadow:0 1px 1px #ccc;
            color:#000;
            border-radius:2px;
            border-bottom: solid 3px #cc1615;
        }
        nav a{
            display:inline-block;
            padding: 10px 40px;
            color:#000 !important;
            font-weight:bold;
            font-size:16px;
            text-decoration:none !important;
            line-height:1;
            background-color:transparent;
            -webkit-transition:background-color 0.25s;
            -moz-transition:background-color 0.25s;
            transition:background-color 0.25s;
        }
        nav a:first-child{
            border-radius:2px 0 0 2px;
        }
        nav a:last-child{
            border-radius:0 2px 2px 0;
        }

        /*导航栏选中状态*/
        nav.a1 .a1,
        nav.a2 .a2,
        nav.a3 .a3,
        nav.a4 .a4{
            background-color: #cc1615;
            color:#fff !important;
        }
        .content{
            margin:0px;
            border-radius:2px;
        }

    </style>
    <script src="../js/1.4.8/angular.js"></script>
</head>
<body>
<div ng-controller="myCtrl" id="frame">
    <nav class="{{active}}" ng-init="active='a1'" ng-click="$event.preventDefault()">
        <a href="#" class="a1" ng-click="active='a1'">头条</a>
        <a href="#" class="a2" ng-click="active='a2'">财经</a>
        <a href="#" class="a3" ng-click="active='a3'">娱乐</a>
        <a href="#" class="a4" ng-click="active='a4'">体育</a>
    </nav>

    <div ng-show="active=='a1'" class="content">
        <ul>
            <li ng-repeat="item in data.a1">
                <a href="{{item.url}}">{{item.title}}</a>
            </li>
        </ul>
    </div>
    <div ng-show="active=='a2'" class="content">
        <ul>
            <li ng-repeat="item in data.a2">
                <a href="{{item.url}}">{{item.title}}</a>
            </li>
        </ul>
    </div>
    <div ng-show="active=='a3'" class="content">
        <ul>
            <li ng-repeat="item in data.a3">
                <a href="{{item.url}}">{{item.title}}</a>
            </li>
        </ul>
    </div>
    <div ng-show="active=='a4'" class="content">
        <ul>
            <li ng-repeat="item in data.a4">
                <a href="{{item.url}}">{{item.title}}</a>
            </li>
        </ul>
    </div>
</div>
<script tyte="text/javascript">
    var app = angular.module("app", []);
    app.controller("myCtrl",["$scope","$http",function ($scope,$http) {
        $http.get('http://qd.bokanedu.com/tgr/api/index.aspx?day=82&type=tabs')
                .success(function (data,status,headers,config) {
                    $scope.data = data;
                });
    }]);
</script>
</body>
</html>